﻿@using BookShop.DTO
@using BookShop.Library.Common
@using BookShop.Library.Constant
@model List<OrderDetail>
@{
    ViewBag.Title = "Chi tiết Đơn hàng";
    var mod = Session[SessionKey.Moderator] != null ? (Moderator)Session[SessionKey.Moderator] : null;
    var currentDetailId = (long?)ViewBag.OrderDetailId;
}

<div class="portlet box blue">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-book"></i>@ViewBag.Title
        </div>
    </div>
    <div class="portlet-body form">
        <form class="form-horizontal" id="formListOrderDetail" method="POST" action="@Url.Action("List")">
            <input type="hidden" name="orderId" id="orderId" value="@ViewBag.OrderId"/>
            <input type="hidden" name="orderDetailId" id="orderDetailId" value="@ViewBag.OrderDetailId"/>
            <div class="form-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Sách <span class="required">*</span></label>
                            <div class="col-md-8">
                                <select class="form-control input-large bs-select" id="bookId" name="bookId" data-live-search="true"></select>
                                <span class="help-block" for="bookId"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">Số lượng <span class="required">*</span></label>
                            <div class="col-md-8">
                                <div class="input-inline input-medium">
                                    <input id="quantity" name="quantity" value="@ViewBag.Quantity" type="text" class="form-control">
                                </div>
                                <span class="help-block" for="quantity"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-striped table-bordered table-hover dataTable" id="orderdetail_table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Sách</th>
                            <th>Số lượng</th>
                            <th>Tổng giá trị</th>
                            <th>Thao tác</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model == null || Model.Count == 0)
                        {
                            <tr>
                                <td colspan="5">No data to display</td>
                            </tr>
                        }
                        else
                        {
                            foreach (var orderDetail in Model)
                            {
                            <tr>
                                <td>@orderDetail.Id</td>
                                <td>@orderDetail.BookId - @orderDetail.BookTitle</td>
                                <td>@orderDetail.Quantity</td>
                                <td>@orderDetail.TotalPrice</td>
                                <td>
                                    @if (CommonFunction.CheckModeratorRole(mod, ModeratorRole.OrderDetailWrite))
                                    {
                                        <a title="Sửa" class="btn blue" href="@Url.Action("List", new { orderId = orderDetail.OrderId, orderDetailId = orderDetail.Id })" >
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <a title="Xóa" class="btn red" href="@Url.Action("Delete", new { orderId = orderDetail.OrderId, orderDetailId = orderDetail.Id })" >
                                            <i class="fa fa-times"></i>
                                        </a>
                                    }
                                </td>
                            </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
            <div class="form-actions right">
                @if (CommonFunction.CheckModeratorRole(mod, ModeratorRole.OrderWrite))
                {
                    if (currentDetailId == null)
                    {
                    <input type="submit" class="btn green" value="Thêm mới" />
                    }
                    else
                    {
                    <input type="submit" class="btn blue" value="Lưu" />
                    }
                }
                <a href="@Url.Action("List", "Order")" class="btn default">Quay lại</a>
            </div>
        </form>
    </div>
</div>

@section css
{
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.css")"/>
    <link href="@Url.Content("~/Content/assets/global/plugins/bootstrap-select/bootstrap-select.min.css")" rel="stylesheet" type="text/css"/>
}

@section javascript
{
    <script src="@Url.Content("~/Content/assets/global/plugins/bootstrap-select/bootstrap-select.min.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    @if (TempData[AlertMessage.TempDataKey] != null)
    {
        <script type="text/javascript">
            toastr['error']('@TempData[AlertMessage.TempDataKey].ToString()', 'Error');
            toastr.option = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-top-right",
                "onclick": null,
                "showDuration": "1000",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        </script>
    }
    <script type="text/javascript">
        $(document).ready(function () {
            $('.bs-select').selectpicker({
            });
            getBooks();
            validateAddEdit();
            $("#quantity").TouchSpin({
                buttondown_class: 'btn green',
                buttonup_class: 'btn green',
                min: 1,
                max: 20,
                stepinterval: 50,
                maxboostedstep: 100
            });
        });
        function getBooks() {
            $("#bookId").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAllBook")',
                data: {},
                success: function (books) {
                    $.each(books, function (i, book) {
                        $("#bookId").append('<option value="' + book.Id + '">' + book.Title + '</option>');
                    });
                    $('#bookId').selectpicker('refresh');
                    $('#bookId').selectpicker('val', '@ViewBag.BookId');
                },
                error: function () {
                }
            });
            return false;
        }
        function validateAddEdit() {
            var form1 = $('#formListOrderDetail');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    bookId: {
                        required: true
                    },
                    quantity: {
                        required: true,
                        digits: true
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}